<template>
    <div class="footer-music">
        <div class="footerLeft" @click="UPDATEDETAILSHOW">
            <img :src="playList[playListIndex].al.picUrl" alt="" />
            <div>
                <p>{{ playList[playListIndex].name }}</p>
                <span>横滑切换上下首哦</span>
            </div>
        </div>
        <div class="footerRight">
            <svg
                class="icon liebiao"
                aria-hidden="true"
                @click="play()"
                v-if="!isPlay"
            >
                <use xlink:href="#icon-bofang2"></use>
            </svg>
            <svg class="icon liebiao" aria-hidden="true" @click="play()" v-else>
                <use xlink:href="#icon-zanting"></use>
            </svg>
            <svg class="icon liebiao" aria-hidden="true">
                <use xlink:href="#icon-caidan"></use>
            </svg>
        </div>
        <!-- //利用audio 里的属性 和 方法 autoplay 和 pause -->
        <audio ref="audio" :src="muiscUrl"></audio>
        <van-popup
            @click-close-icon="UPDATEDETAILSHOW"
            v-model:show="detailShow"
            position="bottom"
            :style="{ height: '100%', width: '100%' }"
        >
            <!-- 利用传值实现类外状态一致 -->
            <MusicDetails
                :musicList="playList[playListIndex]"
                :play="play"
                :isPlay="isPlay"
            >
            </MusicDetails>
        </van-popup>
    </div>
</template>

<script>
import MusicDetails from "@/components/item/MusicDetails.vue";
import { mapState, mapMutations } from "vuex";
import service from "@/request";
export default {
    name: "FootreMusic",
    components: { MusicDetails },
    data() {
        return {
            muiscUrl: "",
        };
    },
    computed: {
        ...mapState([
            "playList",
            "playListIndex",
            "isPlay",
            "detailShow",
            "lyric",
        ]),
    },
    updated() {
        const audio = this.$refs.audio;
        this.UPDATEDURATION(audio.duration);
        this.$store.dispatch("getLyric", this.playList[this.playListIndex].id);
        // console.log(11);
        console.log(this.$refs);
    },
    mounted() {
        //利用audio 里的属性 autoplay 和 pause
        // console.log(this.$refs);
        this.$store.dispatch("getLyric", this.playList[this.playListIndex].id);
        this.currentTime();
        this.fetchmusic();
    },
    methods: {
        //判断音乐是否播放
        play() {
            const audio = this.$refs.audio;
            if (audio.paused) {
                audio.play();
                this.UPDATEISPLAY(true);
            } else {
                audio.pause();
                this.UPDATEISPLAY(false);
            }
            console.log("是否在播放", this.isPlay, audio);
        },
        currentTime() {
            const audio = this.$refs.audio;
            audio.addEventListener("timeupdate", () => {
                console.log(111, audio.currentTime);
                this.UPDATECURRENTTIME(audio.currentTime);
            });
        },
        //获取音乐地址
        async fetchmusic() {
            const res = await service.get(
                `/song/url?id=${this.playList[this.playListIndex].id}`
            );
            console.log(res.data.data[0].url);
            this.muiscUrl = res.data.data[0].url;
        },
        ...mapMutations([
            "UPDATEISPLAY",
            "UPDATEDETAILSHOW",
            "UPDATECURRENTTIME",
            "UPDATEDURATION",
        ]),
    },
    watch: {
        //下标改变播放音乐
        playListIndex() {
            // console.log(11);
            this.$refs.audio.autoplay = true;
            this.fetchmusic();
        },
        //播放列表改变播放音乐
        playList() {
            // console.log(this.playList);
            this.$refs.audio.autoplay = true;
            this.fetchmusic();
        },
    },
};
</script>

<style lang="less" scoped>
.footer-music {
    width: 100%;
    height: 1.4rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #999;
    display: flex;
    padding: 0.2rem;
    justify-content: space-between;
    .footerLeft {
        width: 60%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        img {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
        }
    }
    .footerRight {
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon {
            width: 0.6rem;
            height: 0.6rem;
        }
    }
}
</style>